<template>
	<view>
		<view class="small-my-setting-address-add-box">
			<view class="row row-middle">
				<text>联 系 人：</text>
				<input type="text" placeholder="姓名" v-model="addressInfo.name" />
			</view>
			<view class="row row-middle">
				<text>省/市/区：</text>
				<picker class="picker-width" mode="region" @change="bindPickerChange" :value="index">
					<view class="uni-input">{{ addressArray[0] || '' }} {{ addressArray[1] || '' }} {{ addressArray[2] || '' }}</view>
				</picker>
			</view>
			<view class="row row-middle">
				<text>详细地址：</text>
				<input type="text" placeholder="街道-小区-门牌号" v-model="addressInfo.detail" />
			</view>
			<view class="row row-middle">
				<text>联系电话：</text>
				<input type="number" placeholder="请输入手机号" v-model="addressInfo.mobile" />
			</view>
			<view class="row row-between-wrapper">
				<text>默    认</text>
				<switch :checked="checked" color='#000000' @change="isDefault" />
			</view>
		</view>
		<image src="../../static/img/my_setting_address_add/save.png" @click="saveAddress"></image>
		<van-notify id="van-notify" />
		<van-toast id="van-toast" />
	</view>
</template>

<script>
import http from '../../api/api.js';
import Notify  from '../../wxcomponents/vant/vant-weapp/notify/notify.js';
import Toast   from '../../wxcomponents/vant/vant-weapp/toast/toast.js';
export default {
	data: function() {
		return {
			userId:uni.getStorageSync('userId'),
			addressInfo:{},
			addressArray: [],
			index: 0,
			checked:false
		};
	},
	onLoad(option) {
		if(option.addressId){
			this.init({addressId:option.addressId,userId:this.userId})
		}
	},
	methods: {
		init(data){
			http.searchAddress(data).then(res => {
				this.addressInfo = res.data.data;
				this.addressArray = [this.addressInfo.province,this.addressInfo.city,this.addressInfo.district];
				this.checked = this.addressInfo.isMain
			})
		},
		bindPickerChange(e) {
			this.addressArray = e.target.value;
		},
		isDefault(e){
			this.addressInfo.isMain = Number(e.target.value)
		},
		saveAddress(){
			let flag = true;
			//宽松手机验证正则（开头是1的11位手机号）
			let telReg = /^((\+|00)86)?1\d{10}$/;
			if(!this.addressInfo.name){
				Notify({ type: 'warning', message: '请输入姓名' });
				flag = false
			}else if(!this.addressArray[0]){
				Notify({ type: 'warning', message: '请选择省市区' });
				flag = false
			}else if(!this.addressInfo.detail){
				Notify({ type: 'warning', message: '请填写详细地址' });
				flag = false
			}else if(!telReg.test(this.addressInfo.mobile)){
				Notify({ type: 'warning', message: '请填写正确的11位' });
				flag = false
			}
			//编辑地址
			if(flag && this.addressInfo.id){
				http.updateAddress({
					userId:this.userId,
					addressId:this.addressInfo.id,
					name:this.addressInfo.name,
					mobile:this.addressInfo.mobile,
					province:this.addressArray[0],
					city:this.addressArray[1],
					district:this.addressArray[2],
					detail:this.addressInfo.detail,
					isMain:this.addressInfo.isMain,
					type:2,
					address:0,
					latitude:0,
					longitude:0
				}).then(res => {
					if(res.data.code === 1){
						Toast.success('修改成功');
						uni.redirectTo({
							url:"my_setting_address"
						})
					}else{
						Toast.fail('服务器异常，请重新保存');
					}
				})
			}//新增地址
			else if(flag){
				http.addAddress({
					userId:this.userId,
					name:this.addressInfo.name,
					mobile:this.addressInfo.mobile,
					province:this.addressArray[0],
					city:this.addressArray[1],
					district:this.addressArray[2],
					detail:this.addressInfo.detail,
					isMain:this.addressInfo.isMain || 0,
					type:2,
					address:0,
					latitude:0,
					longitude:0
				}).then(res => {
					if(res.data.code === 1){
						Toast.success('保存成功');
						uni.redirectTo({
							url:"my_setting_address"
						})
					}else{
						Toast.fail('服务器异常，请重新保存');
					}
				})
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../common/mixins';
.small-my-setting-address-add-box {
	@include box;
	view {
		height: 90upx;
	}
	& + image {
		display: block;
		width: 80%;
		margin: 300upx auto 0;
		height: 100upx;
	}
}
.picker-width {
	width: 75%;
	line-height: 90upx;
}
</style>
